<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head th:include="common/admin-header::testcase">

</head>

<body class="app sidebar-mini rtl">

<div th:replace="common/admin-sadbar::sadbar"></div>
<!-- add Modal -->
<div th:replace="common/modal/testcase-modal::testcase_add_modal"></div>
<div th:replace="common/modal/testcase-modal::testcase_update_modal"></div>
<div th:replace="common/modal/testcase-modal::json_data_modal"></div>

<main class="app-content">
    <div class="app-title">
        <div>
            <h1><i class="fa fa-th-list"></i> 测试用例</h1>
            <p>测试用例列表</p>
        </div>
        <ul class="app-breadcrumb breadcrumb">
            <li class="breadcrumb-item"><i class="fa fa-list fa-lg"></i></li>
            <li class="breadcrumb-item"><a href="#">测试管理</a></li>
            <li class="breadcrumb-item"><a href="#">测试用例</a></li>
        </ul>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="tile">
                <div class="tile-body">
                    <div class="offset-md-10">
                        <div class="btn-group" role="group" aria-label="Basic example">
                            <button id="add_new_testcase" class="btn btn-primary" type="button" data-toggle="modal"
                                    data-target="#testcase_add_modal"><i class="fa fa-plus" aria-hidden="true"></i>新增用例
                            </button>
                        </div>

                        <button class="btn btn-danger" data-toggle="modal"
                                data-target="#"><i class="fa fa-remove" aria-hidden="true"></i>删除
                            <!--todo 批量删除接口功能-->
                        </button>
                    </div>

                    <hr>
                    <table class="table table-hover table-bordered" style="white-space: nowrap" id="sampleTable">
                        <thead>
                        <tr>
                            <th th:class="text-center">编号</th>
                            <th th:class="text-center">名称</th>
                            <th th:class="text-center">描述</th>
                            <th th:class="text-center">接口</th>
                            <th th:class="text-center">测试集</th>
                            <th th:class="text-center">测试脚本</th>
                            <th th:class="text-center">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="testcase:${testcases}">
                            <td th:class="text-center"><a>[[${testcase.getTestcaseId()}]]</a></td>
                            <td th:text="${testcase.getTestcaseName()}">name</td>
                            <td th:text="${testcase.getDescription()}">desc</td>
                            <td th:text="${testcase.getIfe().getInterfaceName()}" th:class="text-center">interface</td>
                            <td th:text="${testcase.getTestSuit().getSuitName()}" th:class="text-center">suit</td>
                            <td class="text-center">
                                <button class="btn btn-sm btn-primary" th:jsondata="${testcase.getJsonData()}"
                                        th:onclick="viewJsonData([[${testcase.getJsonData()}]])"
                                        data-toggle="modal"
                                        data-target="#json_data_modal"><i class="fa fa-file-text"
                                                                          aria-hidden="true"></i>详情
                                </button>
                            </td>
                            <td class="text-center">
                                <button class="btn btn-sm btn-success"
                                        th:onclick="runTestCase([[${testcase.getTestcaseId()}]])">
                                    <i class="fa fa-play" aria-hidden="true"></i>运行
                                </button>

                                <button class="btn btn-sm btn-info"
                                        th:onclick="updateTestCaseModalShow([[${testcase.getTestcaseId()}]])"
                                        data-toggle="modal"
                                        data-target="#testcase_update_modal">
                                    <i class="fa fa-edit" aria-hidden="true"></i>修改
                                </button>
                                <button class="btn btn-sm btn-danger"
                                        th:onclick="deleteTestCase([[${testcase.getTestcaseId()}]])">
                                    <i class="fa fa-trash" aria-hidden="true"></i>删除
                                </button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</main>

<div th:include="common/script::script"></div>
<script type="text/javascript">
    drawDataTable("#sampleTable");
</script>

<script th:src="@{/static/flytest-js/testcase.js}"></script>
<script th:src="@{/static/flytest-js/util.js}"></script>
<script th:src="@{/static/jsonedit/dist/fileReaderJS.js}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-filestyle/2.0.0/bootstrap-filestyle.js"></script>
<script th:src="@{/static/valires/js/plugins/fakeLoader.js}"></script>

</body>
</html>